<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// 通知列表
const notifications = ref([
  {
    id: 1,
    type: 'system',
    title: '系统维护通知',
    content: '系统将于2024年1月1日凌晨2:00-4:00进行例行维护，期间可能影响部分功能使用。',
    time: '2023-12-31 10:00:00',
    isRead: false
  },
  {
    id: 2,
    type: 'order',
    title: '订单发货通知',
    content: '您的订单 ORDER202401010001 已发货，请注意查收。',
    time: '2024-01-01 14:00:00',
    isRead: false
  }
])

// 标记通知为已读
const markAsRead = (notification) => {
  // 这里应该调用API标记通知为已读
  // API调用后端
  // markNotificationAsReadAPI(notification.id).then(() => {
  //   notification.isRead = true
  //   ElMessage.success('已标记为已读')
  // })
  
  // 模拟标记成功
  notification.isRead = true
  ElMessage.success('已标记为已读')
}

// 删除通知
const deleteNotification = (index) => {
  // 这里应该调用API删除通知
  // API调用后端
  // deleteNotificationAPI(notifications.value[index].id).then(() => {
  //   notifications.value.splice(index, 1)
  //   ElMessage.success('通知已删除')
  // })
  
  // 模拟删除成功
  notifications.value.splice(index, 1)
  ElMessage.success('通知已删除')
}

// 标记所有通知为已读
const markAllAsRead = () => {
  // 这里应该调用API标记所有通知为已读
  // API调用后端
  // markAllNotificationsAsReadAPI().then(() => {
  //   notifications.value.forEach(notification => {
  //     notification.isRead = true
  //   })
  //   ElMessage.success('已全部标记为已读')
  // })
  
  // 模拟标记成功
  notifications.value.forEach(notification => {
    notification.isRead = true
  })
  ElMessage.success('已全部标记为已读')
}

// 清空通知
const clearAllNotifications = () => {
  // 这里应该调用API清空通知
  // API调用后端
  // clearAllNotificationsAPI().then(() => {
  //   notifications.value = []
  //   ElMessage.success('通知已清空')
  // })
  
  // 模拟清空成功
  notifications.value = []
  ElMessage.success('通知已清空')
}
</script>

<template>
  <el-card class="notification-card">
    <template #header>
      <div class="card-header">
        <h3>通知中心</h3>
        <div class="header-actions">
          <el-button type="primary" text @click="markAllAsRead">
            全部标记为已读
          </el-button>
          <el-button type="danger" text @click="clearAllNotifications">
            清空通知
          </el-button>
        </div>
      </div>
    </template>
    
    <el-empty v-if="notifications.length === 0" description="暂无通知" />
    
    <div v-else class="notification-list">
      <div
        v-for="notification in notifications"
        :key="notification.id"
        class="notification-item"
        :class="{ 'is-read': notification.isRead }"
      >
        <div class="notification-icon">
          <el-icon v-if="notification.type === 'system'">
            <Bell />
          </el-icon>
          <el-icon v-else-if="notification.type === 'order'">
            <ShoppingCart />
          </el-icon>
        </div>
        
        <div class="notification-content">
          <div class="notification-header">
            <h4>{{ notification.title }}</h4>
            <span class="notification-time">{{ notification.time }}</span>
          </div>
          <p class="notification-text">{{ notification.content }}</p>
        </div>
        
        <div class="notification-actions">
          <el-button
            v-if="!notification.isRead"
            type="primary"
            text
            @click="markAsRead(notification.id)"
          >
            标记已读
          </el-button>
          <el-button
            type="danger"
            text
            @click="deleteNotification(notification.id)"
          >
            删除
          </el-button>
        </div>
      </div>
    </div>
  </el-card>
</template>

<style scoped>
.notification-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.notification-list {
  display: flex;
  flex-direction: column;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  padding: 15px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.3s;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item:hover {
  background-color: #f8f9fa;
}

.notification-item.is-read {
  opacity: 0.7;
}

.notification-icon {
  padding: 8px;
  margin-right: 15px;
  background-color: #ecf5ff;
  border-radius: 50%;
  color: #409EFF;
}

.notification-content {
  flex-grow: 1;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.notification-header h4 {
  margin: 0;
  font-size: 16px;
}

.notification-time {
  font-size: 12px;
  color: #999;
}

.notification-text {
  margin: 0;
  color: #666;
  line-height: 1.5;
}

.notification-actions {
  display: flex;
  gap: 10px;
  margin-left: 15px;
}
</style>